<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login Biométrico</title>
        <script type="text/javascript" src="jquery-1.11.1.js"></script>
        <script type="text/javascript" >

            navigator.getMedia = (navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia);
            
            var contem = {video: true, audio: false};

            function sucesso(stream) {
            
                var video = document.querySelector("video");
                
                video.src = window.URL.createObjectURL(stream);
                
                video.onloadedmetadata = function (e) {

                    $(document).ready(function () {
                        $("#bt").click(function () {
                            
                            video.pause();
                            var cv = document.getElementById("mycanvas");
                            var ctx = cv.getContext("2d");
                            ctx.drawImage(video, 0, 0, video.width, video.height);
                            //alert(ctx);
                            img = document.createElement("img");
                            img.src = cv.toDataURL("image/jpg");
                            img.width = cv.width;// / 2;
                            img.height = cv.height;// / 2;

                            var image = img.src;
                            
                            
                            stream.stop(); 
                            
                            $.post("reconhecimento", {foto: image}, function (retorno) {
                            //$.post("reconhecimento", image, function (retorno) {
                                //$("video").hide();
                                $("#bt").hide();
                                //$("#resutado img").attr("src", "detectado.png");
                                $("#resutado").show();
                            });
                        });
                    });
                };

            }
            function error(error) {
                console.log("O navegador não aceita .getUserMedia. error:", error);

            }
            navigator.getMedia(contem, sucesso, error);



        </script>
        <style type="text/css">
            
            video { box-shadow:0px 0px 20px #000; position:relative; top:-10px; z-index:0;}

            #mycanvas,#foto{ display:none;}
            #bt {
                font-family:Arial, Helvetica, sans-serif; 
                padding:10px 5px 10px 5px; 
                background:transparent; 
                border:solid 3px #FFF; 
                color:#AAA; 
                margin:0 auto; 
                width:200px; 
                font-size:16px; 
                text-align:center; 
                position:relative; 
                top:50px; 
                z-index:1; 
                cursor:pointer;}
            #bt:hover {  background:#FFF; color:#000;}
        </style>
    </head>

    <body>
        <center>
            <div id="bt">Faz reconhecimento</div>
            <video autoplay height="450" width="600"></video>
            <canvas id="mycanvas" width="600" height="450">
                Canvas não suportado
            </canvas>
        </center>
    
        <center>
            <div id="formulario">
                
                <form enctype="multipart/form-data" action="reconhecimento" method="POST">
                Enviar esse arquivo: <input name="foto" type="file" />
                <input type="submit" value="Enviar arquivo" />
                </form>
                
            </div>
        </center>
    </body>
</html>
